<template>
	<view class="container">
		<view class="panel">
			<view class="u-flex u-flex-items-center panel_header">
				<uni-icons size="20" color="#333333" custom-prefix="iconfont" type="icon-dianmian"></uni-icons>
				<text class="name">{{payInfo.storeName}}</text>
			</view>
			<view class="u-flex u-flex-items-center tips">
				<uni-icons size="20" color="#F26809" custom-prefix="iconfont" type="icon-shijian"></uni-icons>
				<text class="tips_text">请在{{payInfo.orderDeadline}}前一次性转账到以下账户</text>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">转账金额</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text v-if="payInfo.amount" class="main_text number Medium">¥{{parseFloat(payInfo.amount).toFixed(2)}}</text>
					</view>
					<text class="sub_text">需一次性完成转账</text>
				</view>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">收款方名称</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text class="main_text">{{payInfo.receiveName}}</text>
						<text class="u-margin-left-auto copy" :data-payinfo="payInfo.receiveName" @click="copy">复制</text>
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">收款账号</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text class="main_text number">
							<block v-for="(item, index) in accountFormat">
								<text class="card_number Medium">{{item}}</text>
							</block>
						</text>
						<text class="u-margin-left-auto copy" :data-payinfo="payInfo.receiveAccountNo" @click="copy">复制</text>
					</view>
					<text class="sub_text">每笔交易汇款号会有不同，请务必确认</text>
				</view>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">收款银行</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text class="main_text">{{payInfo.bankName}}</text>
						<text class="u-margin-left-auto copy" :data-payinfo="payInfo.bankName" @click="copy">复制</text>
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">收款支行</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text class="main_text">{{payInfo.accountName}}</text>
						<text class="u-margin-left-auto copy" :data-payinfo="payInfo.accountName" @click="copy">复制</text>
					</view>
					<text class="sub_text" style="color: #F26809;">收款支行为收款方唯一标识，请务必选对</text>
				</view>
			</view>
			<view class="u-flex u-flex-items-start transter_info">
				<view class="name">开户地</view>
				<view class="u-flex u-flex-column content">
					<view class="u-flex u-flex-items-center">
						<text class="main_text">{{payInfo.address}}</text>
					</view>
				</view>
			</view>
			<u-line color="#DDDDDD"></u-line>
			<view class="u-flex u-flex-items-center panel_footer" @click="$u.route({url:'/pages/help/help'})">
				<uni-icons size="20" color="#4179FF" custom-prefix="iconfont" type="icon-wenti"></uni-icons>
				<text class="name">常见问题</text>
				<view class="u-margin-left-auto">
					<u-icon size="16" color="#999999" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="reload_btn">
			<u-button icon="reload" text="手动刷新付款状态" :hairline="false" color="#5C8CFF" iconColor="#FFFFFF" :customStyle="{width:'384rpx',height:'88rpx',borderRadius:'8rpx'}" @click="updateOrder"></u-button>
		</view>
	</view>
</template>

<script>
	import { generateBankTransfer, checkOrder } from '@/config/api.js';
	let interval = null;
	export default {
		data() {
			return {
				orderNo: '', //订单号
				accountFormat: [], //切割后的银行卡号
				payInfo: {
					storeName: '',
					orderDeadline: '',
					orderDeadlineStr: '',
					amount: '',
					receiveAccountNo: '',
					receiveName: '',
					accountName: '',
					remark: ''
				}
			};
		},
		onLoad(options) {
			var that = this;
			let orderNo = options.orderNo;
			let status = options.status;
			let payInfo = options.payInfo;
			if (uni.$u.test.isEmpty(orderNo)) {
				return uni.showModal({
					title: '提示',
					content: '订单信息错误',
					showCancel: false,
					confirmText: '返回',
					success: function(res) {
						if (res.confirm) {
							uni.$u.route({
								type: 'navigateBack'
							});
						}
					}
				});
			}
			that.orderNo = orderNo;
			if (status == 'created') {
				that.payInfo = JSON.parse(payInfo);
				let splitNo = that.payInfo.receiveAccountNo.replace(/(\d{4})(?=\d)/g, "$1 ");
				that.accountFormat = splitNo.split(' ');
				clearInterval(interval);
				interval = setInterval(() => {
					that.getPayResult();
				}, 3000);
			} else {
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				generateBankTransfer(params).then(res => {
					that.payInfo = res.data;
					let splitNo = that.payInfo.receiveAccountNo.replace(/(\d{4})(?=\d)/g, "$1 ");
					that.accountFormat = splitNo.split(' ');
					clearInterval(interval);
					interval = setInterval(() => {
						that.getPayResult();
					}, 3000);
				}).catch(err => {
					console.log('generateBankTransfer=', err);
				});
			}
			// this.bankCardNumbers = '290012341234890';
			// let str = this.bankCardNumbers.replace(/(\d{4})(?=\d)/g, "$1 ");
			// this.cardArr = str.split(' ');
			// console.log(this.cardArr);
		},
		onUnload() {
			clearInterval(interval);
		},
		methods: {
			updateOrder() {
				var that = this;
				uni.showLoading();
				that.getPayResult();
			},
			getPayResult() {
				var that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				checkOrder(params).then(res => {
					let status = res.data.status;
					if (status == 101) {
						clearInterval(interval);
						uni.$u.route({
							url: '/pages/paymentSuccess/paymentSuccess',
							type: 'redirectTo',
							params: {
								orderNo: that.orderNo
							}
						});
					}
					uni.hideLoading();
				}).catch(err => {
					console.log('checkOrder=', err);
					uni.hideLoading();
				});
			},
			copy(e) {
				let payInfo = e.currentTarget.dataset.payinfo;
				let textStr = payInfo;
				// let textStr = `转账金额：${payInfo.amount}\n收款账号：${payInfo.receiveAccountNo}\n收款方名称：${payInfo.receiveName}\n开户银行：${payInfo.accountName}\n备注信息：${payInfo.remark}`;
				// 使用#ifdef H5和#endif控制各端调用情况

				// 该方法不支持h5
				//#ifndef H5
				uni.setClipboardData({
					data: String(textStr), // 必须字符串
					success: function() {}
				});
				//#endif

				// h5端赋值方法，使用创建节点
				// #ifdef H5
				if (!document.queryCommandSupported('copy')) { // 兼容某些浏览器的判断
					console.log('该浏览器不支持');
				}
				let textarea = document.createElement("textarea");
				textarea.value = textStr;
				textarea.readOnly = "readOnly";
				document.body.appendChild(textarea);
				textarea.select(); // 选择对象
				textarea.setSelectionRange(0, textStr.length); // 核心
				let result = document.execCommand("copy"); // 执行浏览器复制命令
				if (result) {
					uni.showToast({
						icon: 'none',
						title: '复制成功',
						duration: 2000
					});
				}
				textarea.remove();
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #4179FF;

		.container {
			padding-top: 40rpx;

			.panel {
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 0 20rpx 2rpx;
				box-sizing: border-box;
				margin: 0 20rpx;

				.panel_header,
				.panel_footer {
					height: 90rpx;

					.name {

						font-size: 30rpx;
						color: #333333;
						line-height: 34rpx;
						margin-left: 20rpx;
					}
				}

				.tips {
					background: #FDFCEC;
					padding: 14rpx 20rpx;
					margin: 0 -20rpx 20rpx;

					.tips_text {
						color: #F26809;
						font-size: 26rpx;

						line-height: 30rpx;
						margin-left: 20rpx;
					}
				}

				.transter_info {
					margin: 38rpx 0;

					.name {
						width: 152rpx;

						font-size: 28rpx;
						color: #888888;
						line-height: 32rpx;
					}

					.content {
						flex: 1;
						max-width: 510rpx;
						word-break: break-all;

						.main_text {

							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;

							.card_number {
								margin-right: 20rpx;
							}
						}

						.sub_text {

							font-size: 24rpx;
							color: #888888;
							line-height: 28rpx;
							margin-top: 8rpx;
						}

						.copy {

							font-size: 28rpx;
							color: #4179FF;
							line-height: 32rpx;
						}

						.number {
							font-size: 34rpx;
							line-height: 38rpx;
						}

						.order_number {

							font-size: 28rpx;
							color: #333333;
							line-height: 32rpx;
						}
					}
				}
			}

			.reload_btn {
				margin-top: 60rpx;
			}
		}
	}
</style>